import './Settings.css'

import { useState } from 'react';
import useStore from '@/store';
import { useNavigate } from 'react-router-dom';

import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
import LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined';


const Settings = ({ currentInnerHeight, setSettingsVisibility }) => {
    const navigate = useNavigate();
    const isMobileView = useStore(state => state.isMobileView);
    const setToken = useStore(state => state.setToken);

    const [openAIAPIEndPoint, setOpenAIAPIEndPoint] = useState(localStorage.getItem('openAIAPIEndPoint') || '')
    const [openAIAPIKey, setOpenAIAPIKey] = useState(localStorage.getItem('openAIAPIEndPoint') || '')
    const [generateTitle, setGenerateTitle] = useState(localStorage.getItem('generateTitle') ? JSON.parse(localStorage.getItem('generateTitle')) : false);
    const [generateTitleOpenAIAPIEndPoint, setGenerateTitleOpenAIAPIEndPoint] = useState(localStorage.getItem('generateTitleOpenAIAPIEndPoint') || '')
    const [generateTitleOpenAIAPIKey, setGenerateTitleOpenAIAPIKey] = useState(localStorage.getItem('generateTitleOpenAIAPIKey') || '')
    

    // 处理输入变化
    const handleChange = (event) => {
        const { name, value } = event.target;
        // console.log(name, value);

        localStorage.setItem(name, value)
        if (name === 'openAIAPIEndPoint') {
            setOpenAIAPIEndPoint(value);
        } else if (name === 'openAIAPIKey') {
            setOpenAIAPIKey(value);
        } else if (name === 'generateTitle') {
            setGenerateTitle(value);
        } else if (name === 'generateTitleOpenAIAPIEndPoint') {
            setGenerateTitleOpenAIAPIEndPoint(value);
        } else if (name === 'generateTitleOpenAIAPIKey') {
            setGenerateTitleOpenAIAPIKey(value);
        }
    };

    // 处理 checkbox 的变化
    const handleCheckboxChange = (event) => {
        // console.log(event.target);
        const { name, value } = event.target;
        if (name === 'generateTitle') {
            localStorage.setItem(name, !generateTitle)
            setGenerateTitle(!generateTitle)
        }
    };

    return (
        <div className='global-config'
            style={{ height: currentInnerHeight }}
        >
            <div className='global-config-panel'
                style={{
                    borderRadius: !isMobileView && '16px',
                    maxHeight: !isMobileView && '500px',
                    maxWidth: !isMobileView && '700px',
                }}>
                <div className='global-config-content'
                    style={{
                        padding: isMobileView && '10px',
                    }}>
                    <div className='global-config-head'>
                        <h1>Setting</h1>
                        <button className="global-config-panel-button"
                            onClick={() => (setSettingsVisibility(false))}><CloseOutlinedIcon fontSize="medium" /></button>
                    </div>
                    <hr style={{ width: '100%' }} />
                    <div className='global-config-option' >
                        <div className='config-line'>
                            <div className='config-lable'>APIEndPoint</div>
                            <input className='config-text-input' type="text" value={openAIAPIEndPoint} name='openAIAPIEndPoint' onChange={handleChange} />
                        </div>
                        <div className='config-line'>
                            <div className='config-lable'>APIKey</div>
                            <input className='config-text-input' type="password" value={openAIAPIKey} name='openAIAPIKey' onChange={handleChange} />
                        </div>
                        <div className='config-line'>
                            <div className='config-lable'>Generate Title</div>
                            <input className='config-text-input' type="checkbox" checked={generateTitle} name='generateTitle' onChange={handleCheckboxChange} />
                        </div>
                        {generateTitle &&
                            <>
                                <div className='config-line'>
                                    <div className='config-lable'>GenerateTitleAPIEndPoint</div>
                                    <input className='config-text-input' type="text" value={generateTitleOpenAIAPIEndPoint} name='generateTitleOpenAIAPIEndPoint' onChange={handleChange} />
                                </div>
                                <div className='config-line'>
                                    <div className='config-lable'>GenerateTitleAPIKey</div>
                                    <input className='config-text-input' type="password" value={generateTitleOpenAIAPIKey} name='generateTitleOpenAIAPIKey' onChange={handleChange} />
                                </div>
                            </>
                        }

                    </div>
                    <hr style={{ width: '100%' }} />
                    <div className='global-config-buttom' >
                        <button className='global-config-panel-button' onClick={() => { setToken(''); navigate('/auth'); }}>
                            <LogoutOutlinedIcon fontSize='medium' />
                        </button>
                    </div>
                </div>



                {/* hello */}
            </div>
        </div>
    )
}

export default Settings;